var jsonData;
var physEnvBarChartImgData;
var physEnvColumnChartImgDataOne;
var physEnvColumnChartImgDataTwo;
var physEnvTableImgData;
var physEnvColumnChartImgDataThree;
var chartHeadDataForFutureUse;
var physicalStackedColumnChartImgData;
var docDefination;

google.load("visualization", "1", {packages : [ "corechart" , "imagechart", "table" ]});
google.setOnLoadCallback(init);

$(document).ready(function() {
					$("#btnExport").click(function() {
						exportChart();
					});

					$('#phyReq').change(function() {
						var selectedText = $("#phyReq option:selected").text();
						$(".newTitle").empty().html(selectedText);
					});
					
					
					$('#range').change(function() {
						var selectedText = $("#range option:selected").text();
						$("#percentRange").empty().html(selectedText);
					});
					
					var Privileges = jQuery('#phyReq');
					Privileges.change(function() {
						if ($(this).val() == '1') {
						//	$('#resources').show();
							$('#resources').removeClass("hide");
							$('#resources').addClass("show");
						} else
							$('#resources').removeClass("show");
						    $('#resources').addClass("hide");

						if ($(this).val() == '2') {
							$('#resources2').removeClass("hide");
							$('#resources2').addClass("show");
						} else
							$('#resources2').removeClass("show");
					    $('#resources2').addClass("hide");

						if ($(this).val() == '3') {
							$('#resources3').removeClass("hide");
							$('#resources3').addClass("show");
						} else
							$('#resources3').removeClass("show");
					    $('#resources3').addClass("hide");

						if ($(this).val() == '4') {
							$('#resources4').removeClass("hide");
							$('#resources4').addClass("show");
						} else
							$('#resources4').removeClass("show");
					    $('#resources4').addClass("hide");
					});

					$('#selPhyRequirment').change(function() {
								
								var selectedText = $("#selPhyRequirment option:selected").text();
								$(".title").empty().html(selectedText);
							});

					$('#selPhyRequirment2').change(function() {
								var selectedText = $("#selPhyRequirment2 option:selected").text();
								$(".title").empty().html(selectedText);
							});

					$('#selPhyRequirment3').change(
							function() {
								var selectedText = $("#selPhyRequirment3 option:selected").text();
								$(".title").empty().html(selectedText);
							});

					$('#selPhyRequirment4').change(
							function() {
								var selectedText = $("#selPhyRequirment4 option:selected").text();
								$(".title").empty().html(selectedText);
							});

					$('#incidenceOfOccurance').change(function() {
										var selected = this.value;
										var selectedText = $("#incidenceOfOccurance option:selected").text();
										$("#change").empty().html(selectedText);
										loadData(selected);
									});

					
					
				$(document).on('click','.panel-heading span.clickable',function(e) {
									var $this = $(this);
									if (this.id == 'tableSpan') {
										if ($this.find('i').hasClass("glyphicon-chevron-up")) {
											$this.find('i').removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
											$("#barChart").toggle();
											$("#table2").toggle();
											$("#columnCharts").toggle();
											$("#table1").removeClass("col-md-6");
											$("#table1").addClass("col-md-12");
											$("#table_div").css("width","1250px");
											$("#table_div").css("height","600px");
											drawPhysEnv_Table(jsonData.physEnvIncOfReqByOccGrpList);
										} else if ($this.find('i').hasClass("glyphicon-chevron-down")) {
											$this.find('i').removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
											$("#barChart").toggle();
											$("#table2").toggle();
											$("#columnCharts").toggle();
											$("#table1").removeClass("col-md-12");
											$("#table1").addClass("col-md-6");
											$("#table_div").css("width","650px");
											$("#table_div").css("height","410px");
											drawPhysEnv_Table(jsonData.physEnvIncOfReqByOccGrpList);
										}
									}
									
									else if (this.id == 'barChartSpan') {
										if ($this.find('i').hasClass("glyphicon-chevron-up")) {
											$this.find('i').removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
											$("#table1").toggle();
											$("#table2").toggle();
											$("#columnCharts").toggle();
											$("#barChart").removeClass("col-md-6");
											$("#barChart").addClass("col-md-12");
											$("#Phys_env_BarChart_div").css("width", "1250px");
											$("#Phys_env_BarChart_div").css("height", "600px");
											drawPhysEnv_BarChart(jsonData.physEnvByOccList);
										} else if ($this.find('i').hasClass("glyphicon-chevron-down")) {
											$this.find('i').removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
											$("#table1").toggle();
											$("#table2").toggle();
											$("#columnCharts").toggle();
											$("#barChart").removeClass("col-md-12");
											$("#barChart").addClass("col-md-6");
											$("#Phys_env_BarChart_div").css("width", "650px");
											$("#Phys_env_BarChart_div").css("height", "370px");
											drawPhysEnv_BarChart(jsonData.physEnvByOccList);
										}
									}

									else if (this.id == 'table2Span') {
										if ($this.find('i').hasClass("glyphicon-chevron-up")) {
											$this.find('i').removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
											$("#barChart").toggle();
											$("#table1").toggle();
											$("#columnCharts").toggle();
											$("#table2").removeClass("col-md-6");
											$("#table2").addClass("col-md-12");
											$("#overHead").css("width","1250px");
											$("#overHead").css("height","600px");
											drawPhysEnv_overhead_Table(chartData.physEnvByOccList,3);
										} else if ($this.find('i').hasClass("glyphicon-chevron-down")) {
											$this.find('i').removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
											$("#barChart").toggle();
											$("#table1").toggle();
											$("#columnCharts").toggle();
											$("#table2").removeClass("col-md-12");
											$("#table2").addClass("col-md-6");
											$("#overHead").css("width","650px");
											$("#overHead").css("height","400px");
											drawPhysEnv_overhead_Table(chartData.physEnvByOccList,3);
										}
									}
									
									else if (this.id == 'columnChartsSpan') {
										if ($this.find('i').hasClass("glyphicon-chevron-up")) {
											$this.find('i').removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
											$("#barChart").toggle();
											$("#table2").toggle();
											$("#table1").toggle();
											$("#columnCharts").removeClass("col-md-6");
											$("#columnCharts").addClass("col-md-12");
										} else if ($this.find('i').hasClass("glyphicon-chevron-down")) {
											$this.find('i').removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
											$("#barChart").toggle();
											$("#table2").toggle();
											$("#table1").toggle();
											$("#columnCharts").removeClass("col-md-12");
											$("#columnCharts").addClass("col-md-6");
										}
									}
									
									else if(this.id == 'stacked'){
										if($this.find('i').hasClass("glyphicon-stats")){
											$this.find('i').removeClass("glyphicon-stats").addClass("glyphicon-list-alt");	
											drawPhysical_stacked(jsonData.physEnvIncOfReqByOccGrpList);
										}
										else if($this.find('i').hasClass("glyphicon-list-alt")){
											$(this).find('i').removeClass("glyphicon-list-alt").addClass("glyphicon-stats");
											drawPhysEnv_Table(jsonData.physEnvIncOfReqByOccGrpList);
										}
									}
									
								});
		
			
				$(document).on('click' , '.panel-heading span.clickable', function(e){
					var $this =$(this);
					if(this.id == 'barChartPdf'){
						($this.find('i').hasClass("glyphicon glyphicon-save")); 
							barChartPdf();
					}
					else if(this.id == 'stackColumnChartPdf'){
						(($this.find('i').hasClass("glyphicon glyphicon-save"))&& ($this.find('i').hasClass("glyphicon-list-alt")));
						stackChartPdf();
					}
					/*else if(this.id == 'stackColumnChartPdf'){
						($this.find('i').hasClass("glyphicon glyphicon-save")&& $this.find('i').hasClass("glyphicon-stats"));
						PrintDataTable('#table_div');
					}*/
					
					
					else if(this.id == 'overHeadTablePdf'){
						($this.find('i').hasClass("glyphicon glyphicon-save"));
			             //PrintElem('#overHead');
						export_PDF(document.getElementById("overHead"), document.getElementById("tablePdfImage")); 
					}
					});			
						
			});


function export_PDF(chartContainer, imgContainer) {

    //main Div Hide
         var el = document.getElementById( 'tablePdfImage' );
        el.parentNode.removeChild( el );  

   //Chart to Image

        alert("in pdf method");
     var doc = chartContainer.ownerDocument;
     var img = doc.createElement('img');
     img.src = getImgData(chartContainer);

     while (imgContainer.firstChild) {
          imgContainer.removeChild(imgContainer.firstChild);
      }

        imgContainer.appendChild(img);

 //Pdf Creation

              var divElements = document.getElementById('overheadTableData').innerHTML;
                                    //Get the HTML of whole page
                                    var oldPage = document.body.innerHTML;

                                    //Reset the page's HTML with div's HTML only
                                    document.body.innerHTML =
                                      "<html><head><title></title></head><body>" +
                                      divElements + "</body>";

//convert whole html page to canvas

                        html2canvas(document.body, {
                                onrendered: function(canvas) {
                                  
// canvas is the final rendered <canvas> element
                                   
var myImage = canvas.toDataURL("image/JPEG").slice('data:image/jpeg;base64,'.length);
                                   
// Convert the data to binary form
                                    myImage = atob(myImage)

//new object of jspdf and save image to pdf.

                                    var doc = new jsPDF();
                                    doc.addImage(myImage, 'JPEG', 0, 0, 200,200);
                                     doc.save('pdfName.pdf');
                                  

                                }
                            });


}


function getImgData(chartContainer)
{


   var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
   var svg = chartArea.innerHTML;
   var doc = chartContainer.ownerDocument;
   var canvas = doc.createElement('canvas');
   canvas.setAttribute('width', chartArea.offsetWidth);
   canvas.setAttribute('height', chartArea.offsetHeight);


   canvas.setAttribute(
       'style',
       'position: absolute; ' +
       'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
       'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
   doc.body.appendChild(canvas);
   canvg(canvas, svg);

   var imgData = canvas.toDataURL("image/JPEG");
  var data = canvas.toDataURL('image/JPEG').slice('data:image/JPEG;base64,'.length);
           
//Convert the data to binary form
           data = atob(data)


   canvas.parentNode.removeChild(canvas);



   return imgData;
}




function PrintElem(elem)
{
    Popup($(elem).html());
}

function Popup(data) 
{
    var mywindow = window.open('', 'overHead', 'height=600,width=800');
    mywindow.document.write('<html><head><title>OverHead Table Based on Percentage Range</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10
    
    return true;
}

function barChartPdf(){
	var doc = new jsPDF();
	doc.addImage(physEnvBarChartImgData, "png", 1, 80, 125, 100, undefined,"none");
    doc.save('physicalBarchart.pdf');
};

function stackChartPdf(){
	var doc = new jsPDF();
	doc.setFontSize(10);
	var selectedText = $(".show>select option:selected").text();
	doc.text(5,50,"Percentage of employees working where " + selectedText + " is required by occupational group");
	doc.addImage(physicalStackedColumnChartImgData, "png" , 5 , 60 , 125 , 70 , undefined , "none");
	doc.save('stackedColumnChart.pdf');
};

function init() {
	initCharts();
}

function initCharts() {
	initPhysEnv_BarChart();
	initPhysEnv_ColumnChart1();
	initPhysEnv_ColumnChart2();
	initPhysEnv_ColumnChart3();
	initPhysEnv_table();
	initPhysEnvOverhead_table();
	initStackedBarChart();
	initPopUpBarChart();
}





function initPhysEnvOverhead_table() {

	var data = new google.visualization.arrayToDataTable([['occupationalGrp Element', 'occupationalGrp Percent' ],[ '', 0 ]]);

	var options = {
		legend : {
			position : 'none'
		},
		chartArea : {
			width : '80%',
			height : ' 60%'
		}
	};
	var ac = new google.vizualization.Table(document.getElementById('overHead'));
	ac.draw(data, options);
}



function initPopUpBarChart() {
	var data = google.visualization.arrayToDataTable([['Braod Occupation', 'occupational Percentage' ],[ '', 0 ] ]);

	var options = {
		title : 'Incidence of requirements By Occupational Group',
		legend : {
			position : 'none'
		},
		chartArea : {
			width : "40%",
			height : "40%"
		},
		hAxis : {
			title : 'Percentage of Employees Required',
			minValue : 0,
			maxValue : 100,
			tooltip : {
				trigger : 'selection'
			}
		},

	};

	var ac = new google.visualization.BarChart(document.getElementById('Popup_BarChart_div'));
	ac.draw(data, options);
}

function initPhysEnv_BarChart() {
	var data = google.visualization.arrayToDataTable([['occupationalGrp Element', 'occupational Group Percent' ],[ '', 0 ] ]);

	var options = {
		title : 'Incidence of requirements By Occupational Group',
		legend : {
			position : 'none'
		},
		chartArea : {
			width : "50%",
			height : "70%"
		},
		hAxis : {
			title : 'Percentage of Employees Required',
			minValue : 0,
			maxValue : 100,
			tooltip : {
				trigger : 'selection'
			}
		},

	};

	var ac = new google.visualization.BarChart(document.getElementById('Phys_env_BarChart_div'));
	ac.draw(data, options);
}





function initPhysEnv_ColumnChart1() {
	var data = google.visualization.arrayToDataTable([[ 'occupationalGrp Element', 'occuranceType Percent' ],[ '', 0 ]]);

	var options = {
		legend : {
			position : 'none'
		},
		chartArea : {
			width : '180%',
			height : '70%'
		},
		vAxis : {
			title : 'Percentage of Incidence of Occurance',
			minValue : 0,
			maxValue : 100,
			tooltip : {
				trigger : 'selection'
			}
		}
	};

	var ac = new google.visualization.ColumnChart(document.getElementById('physEnv_ColumnChart_div1'));
	  ac.draw(data, options);
}

function initPhysEnv_ColumnChart2() {
	var data = google.visualization.arrayToDataTable([
					[ 'occupationalGrp Element', 'occuranceType Percent' ],
					[ '', 0 ] ]);

	var options = {
		legend : {
			position : 'none'
		},
		chartArea : {
			width : '180%',
			height : '70%'
		},
		vAxis : {
			title : 'Percentage of Incidence of Occurance',
			minValue : 0,
			maxValue : 100,
			tooltip : {
				trigger : 'selection'
			}
		}
	};

	var ac = new google.visualization.ColumnChart(document.getElementById('physEnv_ColumnChart_div2'));
	ac.draw(data, options);
}

function initPhysEnv_ColumnChart3() {
	var data = google.visualization.arrayToDataTable([['occupationalGrp Element', 'occuranceType Percent' ],['', 0 ]]);

	var options = {
		legend : { position : 'none'},
		chartArea : {
			width : '180%',
			height : '70%'
		},
		vAxis : {
			title : 'Percentage of Incidence of Occurance',
			minValue : 0,
			maxValue : 100,
			tooltip : {
				trigger : 'selection'
			}
		}
	};
	var ac = new google.visualization.ColumnChart(document.getElementById('physEnv_ColumnChart_div3'));
	ac.draw(data, options);
}

function initPhysEnv_table() {

	var data = new google.visualization.arrayToDataTable([
			[ 'occupationalGrp Element', 'notPresent Percent',
					'almostNever Percent', 'occasionally Percent',
					'frequently Percent', 'constantly Percent' ],
			[ '', 0, 0, 0, 0, 0 ] ]);

	var options = {

		legend : {
			position : 'none'
		},
		chartArea : {
			width : '80%',
			height : ' 60%'
		}
	};

	var ac = new google.vizualization.Table(document.getElementById('table_div'));
	ac.draw(data, options);
}


function initStackedBarChart() {
	var data = new google.visualization.arrayToDataTable([
	                                          			[ 'occupationalGrp Element', 'notPresent Percent',
	                                          					'almostNever Percent', 'occasionally Percent',
	                                          					'frequently Percent', 'constantly Percent' ],
	                                          			[ '', 0, 0, 0, 0, 0 ] ]);                           	  
	  var options = {

          legend: {position: 'none'},
	      chartArea: {width:'90%', height:'60%', left : 75},
	      isStacked: true,
	      vAxis: {title: 'Percentage of Employees Required', minValue: 0, maxValue:100}
	  };
	                                   	  
	  var ac = new google.visualization.ColumnChart(document.getElementById('table_div'));
	  ac.draw(data, options);
}

function exportChart() {
	var doc = new jsPDF();
	doc.addImage(physEnvBarChartImgData, "png", 1, 80, 125, 70, undefined,"none");
	doc.addImage(physicalStackedColumnChartImgData, "png" , 1 , 1 , 125 , 70 , undefined , "none");
	doc.save('physical.pdf');
}

/**
 * Global variable to hold overhead table data across different select options
 */
var displayChartOverHead;
function drawCharts(chartData) {

	drawPhysEnv_BarChart(chartData.physEnvByOccList);
	drawPhysEnv_ColumnChart1(chartData.physEnvReqByOccGrpList);
	drawPhysEnv_ColumnChart2(chartData.physEnvReqByOccGrpList);
	drawPhysEnv_ColumnChart3(chartData.physEnvReqByOccGrpList);
	drawPhysical_stacked(chartData.physEnvIncOfReqByOccGrpList);
	drawPhysEnv_overhead_Table(chartData.physEnvByOccList,3); //3 means 50% - 75%
	displayChartOverHead=chartData.physEnvByOccList;
	drawPhysicalOverheadPopUpChart(chartData.overheadTableDetailList);
}

/**
 *  To display stack chart.
 * @param chartData - contains data in json format 
 * @author NIKHIL
 * @since  3 nov 
 */
function drawOverAllDataTable(chartData){
	drawPhysEnv_Table(chartData.physEnvIncOfReqByOccGrpList);
}

function drawPhysEnv_BarChart(chartData) {
	var dataArray = [];
	var selectedText = $("#incidenceOfOccurance option:selected").text();
	var newSelectedText = $(".show>select option:selected").text();
	var options = {
		title : 'Incidence of requirements By Occupational Group / ' + newSelectedText + ' / ' + selectedText,
		legend : { position : 'none', color : 'black'},
		hAxis : { title : 'Percentage of Employees Required'},
		vAxis : { textStyle : {
				color : 'black',
				fontName : 'Chango',
				fontSize : 10.5
			},
			tooltip : {
				trigger : 'selection'
			},
			format : '#%'
		},
		colors : [ '#e0440e' ],
		chartArea : {
			width : "58%",
			height : "75%",
			left : 245
			
		},
		};

	var gdata = new google.visualization.DataTable();
	gdata.addColumn("string", "occupationalGrp Element");
	gdata.addColumn("number", "occupational Group Percent");
	$.each(chartData,function(i, obj) {
				dataArray.push([ obj.occupationalGrpElement,obj.occupationalGrpPercent ]);
			});

	gdata.addRows(dataArray);

	var chart = new google.visualization.BarChart(document.getElementById('Phys_env_BarChart_div'));
	var formatter = new google.visualization.NumberFormat({
		suffix : '%'
	});
	formatter.format(gdata, 1);
	google.visualization.events.addListener(chart, 'ready', function() {
		physEnvBarChartImgData = chart.getImageURI();
	});

	chart.draw(gdata, options);
}

function drawPhysEnv_ColumnChart1(chartData) {

	var dataArray = [];
	var selectedText = $(".show>select option:selected").text();
	var options = {
		title : 'Amount of ' + selectedText +' typically required by occupation',
		legend : { position : 'none' },
		chartArea : { width : '80%',height : '60%'},
		vAxis : { title : 'Percentage of Incidence of Occurance'},
		hAxis : { textStyle : {
				color : 'black',
				fontName : 'Chango',
				fontSize : 12
			},
			tooltip : { trigger : 'selection' },format : '#%'}, colors : [ '#d799ae' ],
	};

	var gdata = new google.visualization.DataTable();
	gdata.addColumn("string", "occupationalGrpElement");
	gdata.addColumn("number", "Incidence Occurance");
	$.each(chartData, function(i, obj) {
		dataArray.push([ obj.occupationalGrpElement, obj.occuranceType ]);
	});

	gdata.addRows(dataArray);

	var chart = new google.visualization.ColumnChart(document.getElementById('physEnv_ColumnChart_div1'));

	google.visualization.events.addListener(chart, 'ready', function() {
		physEnvColumnChartImgDataOne = chart.getImageURI();
	});

	var formatter = new google.visualization.NumberFormat({
		suffix : '%'
	});
	formatter.format(gdata, 1);

	chart.draw(gdata, options);
}

function drawPhysEnv_ColumnChart2(chartData) {

	var dataArray = [];
	var selectedText = $(".show>select option:selected").text();
	var options = {
		title : 'Amount of ' + selectedText +' typically required by occupation',
		legend : {
			position : 'none'
		},
		chartArea : {
			width : '80%',
			height : '60%'
		},
		vAxis : {
			title : 'Percentage of Incidence of Occurance'
		},
		hAxis : {
			textStyle : {
				color : 'black',
				fontName : 'Chango',
				fontSize : 12
			},
			tooltip : {
				trigger : 'selection'
			},
			format : '#%'
		},
		colors : [ '#d799ae' ]
	};

	var gdata = new google.visualization.DataTable();
	gdata.addColumn("string", "occupationalGrpElement");
	gdata.addColumn("number", "Incidence Occurance");
	$.each(chartData, function(i, obj) {
		dataArray.push([ obj.occupationalGrpElement, obj.occuranceType ]);
	});

	gdata.addRows(dataArray);

	var chart = new google.visualization.ColumnChart(document.getElementById('physEnv_ColumnChart_div2'));

	google.visualization.events.addListener(chart, 'ready', function() {
		physEnvColumnChartImgDataTwo = chart.getImageURI();
	});

	var formatter = new google.visualization.NumberFormat({
		suffix : '%'
	});
	formatter.format(gdata, 1);

	chart.draw(gdata, options);
}

function drawPhysEnv_ColumnChart3(chartData) {

	var dataArray = [];
	var selectedText = $(".show>select option:selected").text();
	var options = {
		title : 'Amount of ' + selectedText +' typically required by occupation',
		legend : {
			position : 'none'
		},
		chartArea : {
			width : '80%',
			height : '60%'
		},
		vAxis : {
			title : 'Percentage of Incidence of Occurance'
		},
		hAxis : {
			textStyle : {
				color : 'black',
				fontName : 'Chango',
				fontSize : 12
			},
			tooltip : {trigger : 'selection'},
			format : '#%'
		},
		colors : [ '#d799ae' ]
	};

	var gdata = new google.visualization.DataTable();
	gdata.addColumn("string", "occupationalGrpElement");
	gdata.addColumn("number", "Incidence Occurance");
	$.each(chartData, function(i, obj) {
		dataArray.push([ obj.occupationalGrpElement, obj.occuranceType ]);
	});

	gdata.addRows(dataArray);
	var chart = new google.visualization.ColumnChart(document.getElementById('physEnv_ColumnChart_div3'));

	google.visualization.events.addListener(chart, 'ready', function() {
		physEnvColumnChartImgDataThree = chart.getImageURI();
	});

	var formatter = new google.visualization.NumberFormat({
		suffix : '%'
	});
	
	formatter.format(gdata, 1);

	chart.draw(gdata, options);
}

function drawPhysEnv_Table(chartData) {
	
	var dataArray = [];
	var options = {

		legend : {
			position : 'none'
		},
		chartArea : {
			width : '80%',
			height : '60%'
		},
		alternatingRowStyle  : true,
	};

	var gdata = new google.visualization.DataTable();
	gdata.addColumn('string', 'Occupational Group' );
	gdata.addColumn('number', 'Not Present');
	gdata.addColumn('number', 'Almost Never' );
	gdata.addColumn('number', 'Occasionally' );
	gdata.addColumn('number', 'Frequently');
	gdata.addColumn('number', 'Constantly');
	$.each(chartData, function(i, obj) {
		dataArray.push([ obj.occupationalGrpElement, obj.notPresentPercent,
				obj.almostNeverPercent, obj.occasionallyPercent,
				obj.frequentlyPercent, obj.constantlyPercent ]);

	});

	gdata.addRows(dataArray);

	var table = new google.visualization.Table(document.getElementById('table_div'));
	var formatter = new google.visualization.NumberFormat({
		suffix : '%'
	});
	formatter.format(gdata, 1);
	formatter.format(gdata, 2);
	formatter.format(gdata, 3);
	formatter.format(gdata, 4);
	formatter.format(gdata, 5);

	var colorFormatter = new google.visualization.ColorFormat();
	colorFormatter.addRange(0.00, 50.00, 'white', 'orange');
	colorFormatter.format(gdata, 1);
	table.draw(gdata, options);
}

function drawPhysical_stacked(chartData) {
	var dataArray = [];
	
	var options = {
		legend : {
			position : 'top',
				top : 100
		},
		vAxis: {title: 'Percentage of Employees Required', minValue: 0, maxValue:100},
		chartArea : {
			width : '80%',
			height : '52%',
			left : 100,
			top : 75
		},
		hAxis : { textStyle : {
			color : 'black',
			fontName : 'Chango',
			fontSize : 10.5
		},
		tooltip : {trigger : 'selection'},
		format : '#%'
	},
		isStacked : true
		};

	var gdata = new google.visualization.DataTable();
	gdata.addColumn('string', 'Occupational Group');
	gdata.addColumn('number', 'Not Present');
	gdata.addColumn('number', 'Almost Never');
	gdata.addColumn('number', 'Occasionally');
	gdata.addColumn('number', 'Frequently');
	gdata.addColumn('number', 'Constantly');
	$.each(chartData, function(i, obj) {
		dataArray.push([ obj.occupationalGrpElement, obj.notPresentPercent,
				obj.almostNeverPercent, obj.occasionallyPercent,
				obj.frequentlyPercent, obj.constantlyPercent ]);

	});

	gdata.addRows(dataArray);

	var chart = new google.visualization.ColumnChart(document.getElementById('table_div'));
	
	google.visualization.events.addListener(chart, 'ready', function() {
		physicalStackedColumnChartImgData = chart.getImageURI();
	});
	
	var formatter = new google.visualization.NumberFormat({
		suffix : '%'
	});
	formatter.format(gdata, 1);
	formatter.format(gdata, 2);
	formatter.format(gdata, 3);
	formatter.format(gdata, 4);
	formatter.format(gdata, 5);
	chart.draw(gdata, options);
}


function displayDataOnChangeOfCondition(displayConditionValue){
    drawPhysEnv_overhead_Table(displayChartOverHead, displayConditionValue);
}

function drawPhysEnv_overhead_Table(chartData,displayCondition) {
     
    var dataArray = [];
    var options = {

        legend : {
            position : 'none'
        },
        chartArea : {
            width : '80%',
            height : '80%'
        },
       
        sort : [ 'enable' ],
        sortAscending : [ true ],
    };
    
    var gdata = new google.visualization.DataTable();
    gdata.addColumn("string", "Occupational Group");
    gdata.addColumn("number", "Occupational Group Percent");
    
    $.each(chartData, function(i, obj) {
    	if(displayCondition==3) { 
            if(obj.occupationalGrpPercent >= 50 && obj.occupationalGrpPercent <75)
                dataArray.push([ obj.occupationalGrpElement,obj.occupationalGrpPercent ]);
             }
    else if(displayCondition == 1){
    		if(obj.occupationalGrpPercent >= 0 && obj.occupationalGrpPercent <25)
                dataArray.push([ obj.occupationalGrpElement,obj.occupationalGrpPercent ]);
    	}else if(displayCondition==2){
            if(obj.occupationalGrpPercent >= 25 && obj.occupationalGrpPercent <50)
                dataArray.push([ obj.occupationalGrpElement,obj.occupationalGrpPercent ]);
     } else if(displayCondition==4){
            if(obj.occupationalGrpPercent >= 75 && obj.occupationalGrpPercent <100)
                   dataArray.push([ obj.occupationalGrpElement,obj.occupationalGrpPercent ]);
        } 
    });

    newDateArray = dataArray.sort();
    gdata.addRows(newDateArray);

    var table = new google.visualization.Table(document.getElementById('overHead'));
    var formatter = new google.visualization.NumberFormat({
        suffix : '%'
    });
    formatter.format(gdata, 1);
    table.draw(gdata, options);

    google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler(){
	var selection = table.getSelection();
	for(var i = 0 ; i< selection.length; i++){
		var item = selection[i];
		if(item.row==9){
			$("#modal").modal('show');
		}
	}
	
};
}

function drawPhysicalOverheadPopUpChart(chartData){
	var dataArray = [];
	var selectedText = $("#incidenceOfOccurance option:selected").text();
	var newSelectedText = $(".show>select option:selected").text();
	var options = {
		title :  '' + selectedText + '/' +newSelectedText,
		legend : { position : 'none', color : 'black'},
		hAxis : { title : 'Percentage of Employees Required'},
		vAxis : { textStyle : {
				color : 'black',
				fontName : 'Chango',
				fontSize : 10.5
			},
			tooltip : {
				trigger : 'selection'
			},
			format : '#%'
		},
		 colors: ['#009933'],
		chartArea : {
			width : "30%",
			height : "30%",
			left: 245
		},
		};

	var gdata = new google.visualization.DataTable();
	gdata.addColumn("string", "Broad Occupation");
	gdata.addColumn("number", "occupational Percentage");
	$.each(chartData,function(i, obj) {
				dataArray.push([ obj.braodOccupation,obj.occupationPercentage ]);
			});

	gdata.addRows(dataArray);

	var chart = new google.visualization.BarChart(document.getElementById('Popup_BarChart_div'));
	var formatter = new google.visualization.NumberFormat({
		suffix : '%'
	});
	formatter.format(gdata, 1);

	chart.draw(gdata, options);
	
}
    
function loadData(selected) {
	$.get("http://" + window.location.host + "/ORSDBWeb/rest/PhyEnvSvc/getPhysEnvData/", {selected : selected}, function(data, status) {
		jsonData = data;
		drawCharts(data);
		drawOverAllDataTable(data);
	});
}

